<template>
  <div>
    <AdvertBar></AdvertBar>
    <div
      @click="goDetail(news.id)"
      class="important-news-card" v-for="(news, index) in nesList" :key="'news'+index">
      <img :src="news.logo" alt="">
      <div class="text">
        <p class="title ellipsis">{{news.title}}</p>
        <p class="desc clamp2-ellipsis">{{news.content}}</p>
        <p class="time">{{news.timeStr}}
          <span class="see-info">查看详情 ></span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
// 高考避雷针
import AdvertBar from '../../components/AdvertBar'

export default {
  name: 'Important',
  components: {
    AdvertBar
  },
  data () {
    return {
      nesList: []
    }
  },
  mounted () {
    this.getNesList();
    let height=document.body.offsetHeight

  },
  methods: {
    // ??? 为什么不在列表接口直接给出外链地址
    goDetail (id) {
      this.$http.get('/informationController/clickDetailById', {
        id
      }).then(value => {
        window.open(value)
      })
    },
    // 获取避雷针列表
    getNesList () {
      this.$http.get('/informationController/getAll').then(value => {
        this.nesList = value
      })
    }
  }
}
</script>

<style scoped lang="less">
  .important-news-card {
    padding: 12px 20px;
    transition: all linear .3s;
    margin-top: 28px;
    display: flex;
    cursor: pointer;

    &:hover {
      background: #FAFBFC;
      transition: all linear .3s;
    }

    :hover .title, :hover span {
      color: #FF6B51;
    }

    img {
      width: 200px;
      height: 150px;
    }

    .text {
      width: 867px;
      margin-left: 30px;
      height: 150px;
    }

    .title {
      font-size: 22px;
      color: #1F2329;
      font-weight: bold;
    }

    .desc {
      min-height: 56px;
      color: #646A73;
      margin: 12px 0 16px 0;
    }

    .time {
      font-size: 14px;
      color: #9CA2A9;

      span {
        float: right;
      }
    }
  }

</style>
